<template>
    <div class="btns">
    <div class="top">
      <p>猜你喜欢</p>
    </div>
    <div class="center">
      <div>综合排序</div>
    <div @click="sheng(1)">距离最近</div>
    <div @click="sheng(2)">销量最高</div>
    <div>筛选</div>
    </div>
    <div class="bottom"  >
      <div v-for="(item,index) in list" v-bind:key="index">
        <img :src="item.pic" alt="">
        <h5>{{item.name}}</h5>
        <p>距离{{item.juli}}km</p>
        <p>销量{{item.xiaoliang}}</p>
      </div>
    </div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'btns',
    data(){
      return{
        btnsIndex:0,
        list:[
          {pic:"https://img2.baidu.com/it/u=220765509,2472933770&fm=253&fmt=auto&app=138&f=JPEG?w=470&h=285",name:'金百万烤鸭',juli:3.9,xiaoliang:1032},
          {pic:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.616pic.com%2Fys_bnew_img%2F00%2F43%2F20%2FluOrLqiidq.jpg&refer=http%3A%2F%2Fpic.616pic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1672485654&t=3232040d2429518dca50a89cc76984b4",name:'稻香饺子馆',juli:3.5,xiaoliang:580}, {pic:"https://img2.baidu.com/it/u=362260360,1781586075&fm=253&fmt=auto&app=138&f=JPEG?w=779&h=500",name:'大盘鸡',juli:2.5,xiaoliang:433},{pic:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.616pic.com%2Fys_bnew_img%2F00%2F43%2F20%2FluOrLqiidq.jpg&refer=http%3A%2F%2Fpic.616pic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1672485654&t=3232040d2429518dca50a89cc76984b4",name:'鸡公煲',juli:2.3,xiaoliang:230},
        ]
      }
      },
      methods:{
        sheng(item){
          this.list.sort((p1,p2)=>{
            if(item==1){
              return p1.juli - p2.juli;
            }else{
              return p2.juli - p1.juli;
            }
          })
        }
      },
    props: {
      msg: String
    }
  }
  </script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped>

.top{
margin: 10px 15px;
}
.center{
  display: flex;
  justify-content: space-around;
  font-size: 14px ;
  font-weight: bold;
  
}

.bottom{
  height: 220px;
 overflow: auto;
}
.bottom div{
  display: flex;
  width: 100%;
  justify-content: space-around;
  margin-bottom: 10px;
  background: #ccc;
}
.bottom h5{
  height: 50px;
  width: 100px;
  margin-right: 20px;
}
.bottom p{
  font-size: 14px;
}
.bottom img{
  width: 80px;
  height: 80px;
}
  </style>
  